<template>
    <el-dialog
      :title="pname + '的共享名片夹'"
      :close-on-click-modal="false"
      :visible.sync="ShareVisible"
      top="20px"
      class="sharepro">
      <!-- 名片夹部分 start -->
      <div class="dialogbody" v-if="!prodialogVisible">
        <el-card class="box-card" v-for="item in cardsList" :key="item.id" @click.native="getprocard(item)">
          <div slot="header" class="clearfix">
            <div>
              <i class="el-icon-folder" style="margin-right: 2px"></i>
              <span>{{item.name}}</span>
            </div>
          </div>
          <div>
            <i class="el-icon-user"></i>
            {{item.employees.length}}
          </div>
        </el-card>
      </div>
      <!-- 名片夹部分 end -->
      <!-- 名片部分 start -->
      <div class="dialogbody" v-if="prodialogVisible">
        <div style="width: 100%">
          <i class="el-icon-s-home" @click="prodialogVisible = false"></i>
        </div>
        <el-card class="box-card2" v-for="item in procardList" :key="item.id">
          <div slot="header" class="clearfix">
            <div>
              <i class="el-icon-user" style="margin-right: 2px"></i>
              <span>{{item.name}}</span>
            </div>
          </div>
          <div style="width: 100%">
            <p>公司: {{item.company}}</p>
            <p>电话：{{item.phone}}</p>
            <p>邮箱：{{item.email}}</p>
            <p>地址: {{item.address}}</p>
          </div>
        </el-card>
      </div>
      <!-- 名片部分 end -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ShareVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
export default {
  name: 'BookShareCustomer',
  data() {
    return {
      ShareVisible: true,
      prodialogVisible: false, // 显示名片
      id: 0, // 客户id
      pname: '', // 客户姓名
      cardsList: [], // 名片夹列表
      procardList: [] // 名片列表
    }
  },
  components: {
    // ProCards: resolve => require(['../ProFile/pro-cards'], resolve)
  },
  props: {
    ShareCardsData: Object
  },
  // mounted() {
  //   this.init()
  // },
  methods: {
    init() {
      this.ShareVisible = true
      this.prodialogVisible = false
      this.id = this.ShareCardsData.id
      this.pname = this.ShareCardsData.name
      this.getsharecards(this.id)
    },
    // 获取他人共享的名片夹
    getsharecards(id) {
      this.getRequest(`/cards/others/${id}`).then(resp => {
        if (resp) {
          this.cardsList = resp.data
        }
      }, error => console.log(error))
    },
    // 点击名片夹,查看名片
    getprocard(data) {
      this.procardList = data.employees
      this.prodialogVisible = true
    },
    // 关闭弹窗，清空数据
    closeVisible() {
      this.ShareVisible = false
      this.id = 0
      this.pname = ''
      this.cardsList.length = 0
      this.procardList.length = 0
    }
  }
}
</script>

<style>
.sharepro .el-dialog__body {
  padding: 0px 10px !important;
  overflow: hidden;
}
/** 弹框放名片夹部分 */
.dialogbody {
  width: 99%;
  height: 70vh;
  overflow-y: auto;
  /* background-color: cornflowerblue; */
}
/** 名片夹 */
.box-card {
  display: inline-block;
  width: 25%;
  height: 10vh;
  margin-right: 3vw !important;
}
.box-card:hover {
  cursor: pointer;
}
/** 名片夹 header*/
.dialogbody .el-card__header {
  padding: 5px 5px !important;
  padding-bottom: 0px !important;
}
.dialogbody .clearfix div {
  display: inline-block;
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
/** 名片部分 */
.box-card2 {
  display: inline-block;
  width: 25%;
  height: 17vh;
  margin-right: 3vw !important;
}
.box-card2 .el-card__body {
  padding: 0px 10px !important;
}
/** 名片body > p 的样式 */
.box-card2 p {
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
  margin: 0px;
  margin-top: 5px;
}
.el-icon-s-home {
  color: rgba(64,158,255);
  font-size: 2vw;
  width: 2vw;
  height: 2vh;
}
.el-icon-s-home:hover {
  cursor: pointer;
}
.el-icon-folder {
  color: rgba(64,158,255);
}
.el-icon-user {
  color: rgba(64,158,255);
}
</style>
